<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <template #left>
          <span>总记录数: {{ total }} 条</span>
        </template>

        <template #right>
          <el-button type="warning" size="small" @click="$router.push('/employees/import')">excel导入</el-button>
          <el-button type="danger" size="small" @click="ExportExcel">excel导出</el-button>
          <el-button type="primary" size="small" @click="openAddEmployeesDialog">新增员工</el-button>
        </template>
      </page-tools>

      <el-card style="margin-top: 10px;">
        <el-table v-loading="isLoading" border :data="employeesList">
          <el-table-column type="index" :index="indexMethod" label="序号" />
          <!-- 显示头像 -->
          <el-table-column label="头像" width="80px" prop="staffPhoto">
            <template #default="scope">
              <img
                v-imgError="staffPhoto404"
                :src="scope.row.staffPhoto"
                alt=""
                style="width:50px; height:50px; border-radius:50%; cursor:pointer;"
                @click="handleShowCodeDialog(scope.row.staffPhoto)"
              >
            </template>
          </el-table-column>
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="手机号" prop="mobile" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment" :formatter="getEmploymentText">
            <!-- <template #default="{row}">
              {{ getEmploymentText(row.formOfEmployment) }}
            </template> -->
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间" prop="timeOfEntry" />
          <el-table-column label="操作" fixed="right" width="280">
            <template #default="scope">
              <!-- 最后时期：设置二级按钮权限 -->
              <el-button
                type="primary"
                size="small"
                :disabled="!checkBtnPermission('EMP_LOOK')"
                @click="$router.push(`/employees/detail/${scope.row.id}`)"
              >查看</el-button>
              <el-button
                type="success"
                size="small"
                :disabled="!checkBtnPermission('EMP_ROLE')"
                @click="handleAssignRoleDialog(scope.row.id)"
              >分配角色</el-button>
              <el-button
                type="danger"
                size="small"
                :disabled="!checkBtnPermission('EMP_DELETE')"
                @click="delEmployees(scope.row.id)"
              >删除</el-button>
              <!-- <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button type="text" size="small">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <!-- <div style="height: 60px; margin-top: 10px">
          <el-pagination layout="prev, pager, next" />
        </div> -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <!-- 分页组件 -->
          <!-- <el-pagination layout="prev,pager,next" /> -->
          <el-pagination
            :current-page="getEmployeesListNeedData.page"
            :page-sizes="[2, 4, 6, 8, 10]"
            :page-size="getEmployeesListNeedData.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>

      <!-- 添加员工弹框 -->
      <AddEmployees :is-add.sync="isAdd" @getEmployeesList="getEmployeesList" />

      <!-- 点击头像，显示二维码弹框 -->
      <el-dialog title="头像二维码" :visible="showCodeDialog" @close="showCodeDialog = false">
        <el-row type="flex" justify="center">
          <canvas ref="showImgCode" />
        </el-row>
      </el-dialog>

      <!-- 点击查看角色按钮，出现分配角色的弹框 -->
      <AssignRole
        :show-role-dialog.sync="showRoleDialog"
        :user-id="userId"
      />
    </div>
  </div>
</template>

<script>
// 引入封装的请求：
import { getEmployeesListRequest, delEmployeesRequest } from '@/api/employees'
// 枚举文件展示聘用信息
import enumObj from '@/constant/employees'
// 添加员工弹框
import AddEmployees from './components/add-employees.vue'
// 封装的过滤器处理时间格式，在excel导出的时候使用
import { getFormateTime } from '@/filters/index'
// 引入404staffPhoto.png 当头像为烂图的时候显示该头像
import staffPhoto404 from '@/assets/common/404staffPhoto.jpg'
// 点击头像显示二维码
import QrCode from 'qrcode'
// 引入分配角色弹框
import AssignRole from './components/assign-role.vue'
import { mapGetters } from 'vuex'

export default {
name: 'Employees',

components: {
  AddEmployees,
  AssignRole
},

data() {
  return {
    // 加载效果
    isLoading: false,
    // 请求员工列表所需数据
    getEmployeesListNeedData: {
      page: 1,
      size: 6
    },
    // 请求所得员工列表数据
    employeesList: [],
    total: 0,

    // 枚举文件展示聘用信息
    hireType: enumObj.hireType,

    // 是否显示添加弹框
    isAdd: false,

    // 404 头像
    staffPhoto404,

    // 点击头像显示头像二维码弹框
    showCodeDialog: false,

    // 点击查看角色按钮，出现分配角色的弹框
    showRoleDialog: false,
    // 传入分配角色弹框组件的角色 ID
    userId: ''
  }
},

computed: {
  // 按钮权限
  ...mapGetters(['roles', 'userInfo'])
},

created() {
  this.getEmployeesList()
},

methods: {
  // 获取员工列表数据
  async getEmployeesList() {
    this.isLoading = true
    const { data } = await getEmployeesListRequest(this.getEmployeesListNeedData)
    this.employeesList = data.rows
    this.total = data.total
    this.isLoading = false
  },

  // 分页功能方法
  // 每页条数变化
  handleSizeChange(val) {
    // 请求数据变成当前点击的页面条数
    this.getEmployeesListNeedData.size = val
    // 重置页数
    this.getEmployeesListNeedData.page = 1
    // 重新发起请求得到新页数据并渲染
    this.getEmployeesList()
  },
  // 当前页变化
  handleCurrentChange(val) {
    // 请求数据变成当前点击的页码
    this.getEmployeesListNeedData.page = val
    // 重新发起请求得到新页数据并渲染
    this.getEmployeesList()
  },
  // 索引号排序
  indexMethod(index) {
    // (this.getEmployeesListNeedData.page - 1) * this.getEmployeesListNeedData.size 表示当前页之前所有数据条数的总和
    return index + 1 + (this.getEmployeesListNeedData.page - 1) * this.getEmployeesListNeedData.size
  },

  // 处理员工聘用形式显示数据
  // getEmploymentText(data) {
  //   return parseFloat(data) === 1 ? '正式员工' : '非正式员工'
  // }
  getEmploymentText(row, column, cellValue, index) {
    const obj = this.hireType.find(item => item.id === parseFloat(cellValue))
    return obj ? obj.value : '未知'
    // return parseFloat(cellValue) === 1 ? '正式员工' : '非正式员工'
  },

  // 删除员工：
  delEmployees(id) {
    // elementUI 里提供的提示方法：
    this.$confirm('此操作将永久删除, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async() => {
      // 调用删除：
      await delEmployeesRequest(id)
      this.$message.success('删除成功!')
      // 当最后一页只有一条数据，且删除之后，会显示暂无数据，应该往前一页显示数据
      if (this.getEmployeesListNeedData.page > 1 && this.employeesList.length === 1) {
        this.getEmployeesListNeedData.page--
      }
      // 重新渲染页面：
      this.getEmployeesList()
    }).catch(() => {
      this.$message.info('已取消删除')
    })
  },
  // 打开添加员工弹框
  openAddEmployeesDialog() {
    this.isAdd = true
  },

  // 导出excel
  // 先加入 vandor 文件夹，里面有导出excel的文件
  // 注意：添加的vandor文件夹下，XLSX 变成按需导入
  // 此部分是按照项目模板所写
  async ExportExcel() {
    // 先发起请求获取所有数据
    const { data } = await getEmployeesListRequest({ page: 1, size: this.total })
    // 导出的表头
    const headersArr = ['姓名', '手机号', '入职日期', '聘用形式', '转正日期', '工号', '部门']
    // 获得的数据中为英文，导出的文件中名字要变成对应中文
    const headersRelations = {
      '姓名': 'username',
      '手机号': 'mobile',
      '入职日期': 'timeOfEntry',
      '聘用形式': 'formOfEmployment',
      '转正日期': 'correctionTime',
      '工号': 'workNumber',
      '部门': 'departmentName'
    }
    // 调用处理数据的方法：
    const exportData = this.formatExportData(data.rows, headersArr, headersRelations)

    // 开始导出：
    import('@/vendor/Export2Excel').then(excel => {
      excel.export_json_to_excel({
        header: headersArr,
        data: exportData,
        filename: '员工信息',
        autoWidth: true,
        bookType: 'xlsx'
      })
    })
  },

  // 处理导出的数据中格式为变成二维数组：
  formatExportData(rows, headersArr, headersRelations) {
    // 存放所有的遍历后的值，即最终使用的二维数组
    const allData = []
    rows.forEach(item => {
      // 存放单轮遍历的按顺序获取的rows里的值
      const arr = []
      // 为了按顺序取出表头顺序的值，因此遍历 headersArr（这一步只是为了按顺序）
      headersArr.forEach(headerItem => {
        // 根据 headerItem 的中文名字找英文名字的数据
        // headersRelations[headerItem] 为 headersRelations 里面的英文名
        // item[headersRelations[headerItem]] 就是英文名里对应的值

        // 处理时间的格式（yyyy-mm-dd）：
        if (headersRelations[headerItem] === 'timeOfEntry' || headersRelations[headerItem] === 'correctionTime') {
          // 使用封装的过滤器来处理时间格式
          item[headersRelations[headerItem]] = getFormateTime(item[headersRelations[headerItem]])
        }

        // 处理聘用形式的格式（将1/2 变为 正式/非正式）
        if (headersRelations[headerItem] === 'formOfEmployment') {
          // 看 item[headersRelations[headerItem]] 的值是否为 1 或者 2，如果找到了匹配上了，这一次匹配上的 findRes 就是 hireType 的值，未匹配上的 findRes 的值就是 undefined
          const findRes = this.hireType.find(hireItem => hireItem.id === item[headersRelations[headerItem]])
          // 如果找到了值为 1 或者 2 的，则更改值，如果没有找到（不是1或者2），则为'未知聘用形式'
          item[headersRelations[headerItem]] = findRes ? findRes.value : '未知'
        }

        // 把值放在 arr 里
        arr.push(item[headersRelations[headerItem]])
      })
      // console.log(arr)
      // 将每一次单轮遍历后的值的数组放在这里面，构成二维数组
      allData.push(arr)
    })
    // console.log(allData)
    return allData
  },

  // 点击头像显示头像二维码弹框
  handleShowCodeDialog(imgUrl) {
    // 当头像是烂图的时候，不会显示二维码，因此判断
    if (!imgUrl) {
      this.$message.error('当前用户没有头像，无法生成二维码')
      return
    }
    // 显示弹框：
    this.showCodeDialog = true
    // 生成二维码（特定语法）
    // 由于上面代码产生了一个新的 dom 因此想要奏效，需要 $nextTick
    this.$nextTick(() => {
      QrCode.toCanvas(this.$refs.showImgCode, imgUrl)
    })
  },

  // 点击查看角色按钮，出现分配角色的弹框，并操作
  handleAssignRoleDialog(id) {
    // 将角色 id 传给弹框组件
    this.userId = id
    // 打开弹框
    this.showRoleDialog = true
  },

  // 判断按钮权限：
  checkBtnPermission(permissionName) {
    // if (this.userInfo.roles) {
    //   return this.userInfo.roles.points.includes(permissionName)
    // } else {
    //   return false
    // }
    // 如果需要权限按钮，注释下面，解开上面就好
    return true
  }
}

}
</script>

<style>

</style>
